<template>
  <div class="order-detail">
    <el-button class="back-btn" type="primary" @click="back">返回</el-button>
    <div class="order-wrap">
      <el-steps :active="2" align-center process-status="wait">
        <el-step
          title="充电结束时间"
          :description="
            data.detailData.createTime ? data.detailData.createTime : '--'
          "
        />
        <el-step
          title="占用开始时间"
          :description="
            data.detailData.startTime ? data.detailData.startTime : '--'
          "
        />
        <el-step title="占用结束时间" description="" />
        <el-step title="订单支付" description="" />
      </el-steps>
      <div class="price-card">
        <div class="card-data left">
          <div class="card-data">
            <div class="card-item">
              <div class="title">占用时长：</div>
              <div class="card-value">
                {{
                  data.detailData.durationHours
                    ? data.detailData.durationHours
                    : '--'
                }}
              </div>
            </div>
            <div class="card-item">
              <div class="title">占用收费：</div>
              <div class="card-value">
                ￥{{ data.detailData.amount ? data.detailData.amount : '--' }}
              </div>
            </div>
          </div>
        </div>
        <div class="right"></div>
      </div>

      <Head title="占用信息">
        <template #content>
          <div class="order-info">
            <Detail
              :columns="2"
              :form="detailForm"
              :detail="data.detailData"
              align="right"
            ></Detail>
          </div>
        </template>
      </Head>
      <Head title="用户信息">
        <template #content>
          <div class="order-info">
            <Detail
              :columns="2"
              :form="detailForm1"
              :detail="data.detailData"
              align="right"
            ></Detail>
          </div>
        </template>
      </Head>
      <div class="edit-line"></div>
      <Head title="结算处理">
        <template #content>
          <div class="tips-info">
            <div class="info-item">
              温馨提示：默认结算信息为估算建议值，请确认后再行保存！
            </div>
          </div>
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="90px"
          >
            <div style="width: 90%; padding: 0 60px" class="order-info">
              <!-- <div style="width: 90%; padding: 0 60px"> -->
              <div style="width: calc(50% - 120px)">
                <el-form-item label="占用时长" prop="duration">
                  <el-input
                    v-model.trim="ruleForm.duration"
                    placeholder="请输入占用时长"
                    maxlength="9"
                    @input="getSummmer"
                    clearable
                  >
                    <template #append>分钟</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="订单计费">
                  {{
                    data.detailData.oughtAmount
                      ? data.detailData.oughtAmount
                      : '--'
                  }}元
                </el-form-item>
                <el-form-item label="处理原因" prop="abnormalRemark">
                  <el-input
                    @input="getSummmer"
                    v-model.trim="ruleForm.abnormalRemark"
                    type="textarea"
                    maxlength="200"
                    :rows="3"
                    show-word-limit
                    placeholder="结算延时，定时处理，如有问题请咨询客服"
                    clearable
                  />
                </el-form-item>
              </div>
              <div style="width: calc(50% - 120px)">
                <el-form-item label=" "> </el-form-item>
                <el-form-item label="占用收费">
                  {{ data.detailData.amount ? data.detailData.amount : '--' }}元
                </el-form-item>
              </div>
            </div>
          </el-form>
        </template>
      </Head>
      <div class="edit-btn-wrap">
        <el-button type="primary" plain @click="back">取消</el-button>
        <el-button type="primary" v-btnAntiShake="onSubmit">保存</el-button>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus';
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import {
  getOccupyOrder,
  occupyOrderTurnOrder,
  getOverTimeCost,
} from '@/service/apis/order';
import { IS_DECIMAL_4, IS_INT_0 } from '@/utils/verify';
const route = useRoute();
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const {
  query: { id },
} = route;
let data = reactive({
  detailData: {} as any,
  activeTab: 'info',
  startChargeSeq: '',
  chartsData: [] as any,
  chartsType: '',
  isData: true,
});
const detailForm = reactive([
  {
    label: '所属电站',
    prop: 'stationName',
  },
  {
    label: '占用终端编码',
    prop: 'connectorId',
  },
  {
    label: '停车缓冲时长',
    prop: 'bufferTime',
    unit: '分钟',
  },
  {
    label: '超时计费',
    prop: 'price',
    template: (row: any, index: number) => {
      return `${row.price}元/${row.priceTime}分钟`;
    },
  },
  {
    label: '关联充电订单',
    prop: 'startChargeSeq',
  },
  {
    label: '充电结束时间',
    prop: 'createTime',
  },
]);

const detailForm1 = reactive([
  {
    label: '用户账号',
    prop: 'accountNumber',
  },
  {
    label: '用户姓名',
    prop: 'userName',
  },
  {
    label: '归属企业',
    prop: 'orgName',
  },
]);

getOccupyOrder(Number(id)).then((res: any) => {
  if (res) {
    data.detailData = res;
    data.startChargeSeq = res.startChargeSeq;
  }
});

const back = () => {
  router.go(-1);
};

let ruleForm = reactive({
  abnormalRemark: '',
  duration: '',
});

const rules = reactive<FormRules>({
  duration: [
    { required: true, message: '请输入占用时长', trigger: 'blur' },
    {
      pattern: IS_INT_0,
      message: '请输入正确的占用时长',
      trigger: ['blur', 'change'],
    },
  ],
  abnormalRemark: [
    { required: true, message: '请输入处理原因', trigger: 'blur' },
  ],
});

const formData = reactive({
  id: '',
  duration: '',
});

const getSummmer = async () => {
  formData.id = data.detailData.id;
  formData.duration = ruleForm.duration;
  if (!ruleFormRef.value) return;
  try {
    await Promise.all([ruleFormRef.value.validate()]);
  } catch (fields: any) {
    for (const key in ruleForm) {
      if (fields[key]) {
        ruleFormRef.value.scrollToField(key);
        break;
      }
    }
    return;
  }
  if (String(formData.duration) && !Number.isNaN(Number(formData.duration))) {
    getOverTimeCost(formData).then((res: any) => {
      if (res) {
        data.detailData.amount = res.amount;
        data.detailData.oughtAmount = res.oughtAmount;
      }
    });
  }
};

// 结算处理
const emit = defineEmits(['clear-cache']);
const onSubmit = async () => {
  if (!ruleFormRef.value) return;
  try {
    await Promise.all([ruleFormRef.value.validate()]);
  } catch (fields: any) {
    for (const key in ruleForm) {
      if (fields[key]) {
        ruleFormRef.value.scrollToField(key);
        break;
      }
    }
    return;
  }
  console.log(data.detailData);
  if (!data.detailData.oughtAmount) {
    ElMessageBox.alert('请先获取订单计费', '提示', {
      confirmButtonText: '确认',
      type: 'warning',
    });
    return;
  }

  let formData = Object.assign(data.detailData, ruleForm);
  console.log(formData);
  occupyOrderTurnOrder(formData).then((res: any) => {
    emit('clear-cache');
    back();
  });
};
</script>
<style lang="scss">
.order-detail {
  position: relative;

  .back-btn {
    position: absolute;
    right: 20px;
    top: 6px;
    z-index: 10;
  }

  .tips-info {
    background: #c6e2ff;
    padding: 10px;
    margin: 10px 0 20px;

    .info-item {
      font-size: 14px;
      line-height: 28px;
      margin: 0 20px;
    }
  }
}

.order-wrap {
  .order-reason {
    display: flex;
    justify-content: space-around;
    font-weight: 500;
    font-size: 16px;
    color: #5073f7;
    width: 100%;
    margin-top: 20px;

    // padding: 0 100px;
    .order-no {
      width: 50%;
    }
  }

  .price-card {
    margin-top: 20px;
    width: 100%;
    height: 119px;
    background: linear-gradient(
      98.09deg,
      rgba(107, 164, 254, 0.36) 0%,
      rgba(67, 109, 255, 0.36) 73.83%
    );
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      width: calc(100% - 128px);

      .card-data {
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #ffff;
        align-items: center;

        .card-item {
          text-align: center;

          .iconfont {
            font-size: 36px;
            line-height: 36px;
          }

          .title {
            margin-top: 2px;
            color: #555555;
            font-weight: 400;
            font-size: 15px;
            line-height: 23px;
          }

          .card-value {
            margin-top: 8px;
            font-weight: 700;
            font-size: 36px;
            line-height: 44px;
            color: #5073f7;
          }

          .card-value1 {
            color: #292d32;
            display: flex;
            align-items: center;
          }
        }

        .card-item1 {
          display: flex;
          align-items: flex-end;

          .fee {
            font-weight: 700;
            font-size: 12px;
            line-height: 16px;
            margin-left: 10px;
            margin-bottom: 6px;
            color: #5073f7;
          }
        }
      }
    }

    .right {
      width: 128px;
      height: 118px;
      background-image: url(@/assets/images/order-wallet.png);
      background-repeat: no-repeat;
      background-size: cover;
      margin-top: 26px;
    }
  }

  .order-info {
    display: flex;
    justify-content: space-around;

    .order-detail {
      margin-top: 20px;
    }
  }
}
</style>
  